<!--
 * @Author: dfh
 * @Date: 2024-03-20 15:03:10
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<!--
 * @Author: dfh
 * @Date: 2024-03-20 15:03:10
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <swiper class="swiper" :current="currentIndex">
            <swiper-item v-for="(item, index) in questions" :key="index" :duration="1000">
                <view class="card">
                    <view class="txt-black-34 txt-36">{{ index + 1 }}、{{ item.question }}</view>
                    <view class="flex ai-center mt-20">
                        <view class="flex ai-center" :style="{ marginLeft: key == 'A' ? '0rpx' : '20rpx' }"
                            v-for="(val, key) in item.questionOption" :key="key" @click="onNextHandle(item.id, key)">
                            <text class="iconfont  txt-black-102 txt-32"
                                :class="computedSelectedRadio(item.id, key)"></text>
                            <text class="txt-black-102 txt-32 ml-10">{{ key }}:{{
            val
        }}</text>
                        </view>
                    </view>
                </view>

            </swiper-item>
        </swiper>
        <button class="submit" @click="registerHandle" v-if="isComplete">提交</button>
        <view class="flex ai-center jc-between mt-40" v-else style="width:100%">
            <button class="btn btn1" :class="currentIndex == 0 ? 'disabled' : ''" :disabled="currentIndex == 0"
                @click="prevHandle">上一题</button>
            <button class="btn btn2" :class="currentIndex == questions.length - 1 ? 'disabled' : ''"
                :disabled="currentIndex == questions.length - 1" @click="nextHandle">下一题</button>
        </view>

        <view class="footer-wrap">
            <view class="cycler" :class="computedSelectedResponse(item.id)" v-for="(item, index) in questions"
                :key="index" @click="onSelectedIndex(index)">{{ index + 1 }}</view>
        </view>
    </view>
</template>

<script setup>
import { fetchQuestionList, questionsubmit } from '@/services/testReq';
import { onLoad } from '@dcloudio/uni-app';
import { ref, watchEffect } from 'vue';
import { showToast } from '@/utils/toast'

const currentIndex = ref(0);
const questions = ref([])
const selectedObj = ref({})
const isComplete = ref(false);
onLoad(() => {
    getQuestionList();
})

watchEffect(() => {
    if (questions.value && questions.value.length > 0) {
        const keys = Object.keys(selectedObj.value);
        isComplete.value = keys.length == questions.value.length;
    }

})

const computedSelectedResponse = (key) => {
    if (Object.keys(selectedObj.value).length > 0) {
        return selectedObj.value[key] ? 'active' : ''
    }
    return ''
}

const computedSelectedRadio = (id, key) => {
    if (Object.keys(selectedObj.value).length > 0) {
        return selectedObj.value[id] == key ? 'icon-danxuan-xuanzhong' : 'icon-radio'
    }
    return 'icon-radio'
}

const getQuestionList = async () => {
    const { msg, status, data } = await fetchQuestionList();
    if (status === 1) {
        questions.value = (data || []).map(item => ({
            ...item,
            questionOption: JSON.parse(item.questionOption),
            response: ''
        }));
        console.log(questions.value)
    } else {
        showToast(msg)
    }
}



const registerHandle = async () => {
    const keys = Object.keys(selectedObj.value);
    const params = keys.reduce((m, n) => {
        m.push({
            quesId: n,
            answerId: selectedObj.value[n]
        })
        return m;
    }, [])
    console.log('params-->', params)
    const { msg, status, data } = await questionsubmit({
        questionDetections: params
    });
    if (status === 1) {
        showToast('提交成功')
        uni.navigateBack()
    } else {
        showToast(msg)
    }
}

const onNextHandle = (id, key) => {
    selectedObj.value[id] = key;


}

const nextHandle = () => {
    currentIndex.value = currentIndex.value + 1;
}

const prevHandle = () => {
    currentIndex.value = currentIndex.value - 1;
}

const onSelectedIndex = (index) => {
    currentIndex.value = index;
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: rgba(241, 245, 251, 1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-items: center;

    .swiper {
        width: 100vw;

        .card {
            margin-top: 30rpx;
            width: 92%;
            margin-left: 4%;
            padding: 26rpx;
            border-radius: 20rpx;
            background-color: white;
            box-sizing: border-box;

        }


    }

    .btn {
        width: 120rpx;
        height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        line-height: 70rpx;
        font-size: 22rpx;
        color: white;

        &.disabled {
            opacity: 0.6;
        }
    }

    .btn1 {
        background-color: rgba(88, 126, 251, 1);
    }

    .btn2 {
        background-color: rgba(14, 183, 105, 1);
    }

    .submit {
        width: 420rpx;
        height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        line-height: 70rpx;
        font-size: 22rpx;
        color: white;
        background-color: rgba(14, 183, 105, 1);
    }


    /* .btn {
        width: 86%;
        height: 100rpx;
        border-radius: 50rpx;
        margin-top: 160rpx;
        background: #0572e7;
        color: white;
        line-height: 100rpx;
        margin-bottom: 40rpx;
    } */

    .footer-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 200rpx;
        display: flex;
        flex-wrap: wrap;
        background-color: white;
        padding: 30rpx;
        box-sizing: border-box;

        .cycler {
            width: 60rpx;
            height: 60rpx;
            font-size: 30rpx;
            color: white;
            background-color: rgba(14, 183, 105, 1);
            border-radius: 30rpx;
            text-align: center;
            line-height: 60rpx;
            margin-left: 20rpx;

            &.active {
                background-color: rgba(88, 126, 251, 1);
            }
        }
    }
}

/* .scroll {
    width: 100vw;
    height: 100vh;
        background-color: white;

    .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding:0 30rpx;
        box-sizing: border-box;
    }
} */
</style>